

<template>
<div class="card">
  <div class="content">
    <div class="left">
      <img src="@/assets/cssimages/login1/img2.png" class="people p-other-animtion" alt="people">
<!--      <img src="./asset/img1.png" class="sphere s-other-animtion" alt="sphere">-->
    </div>
    <div class="right">
      <div class="top">
        <div class="top-item">
          <span class="top-text">主页</span>
        </div>
        <div class="top-item">
          <span class="top-text">注册</span>
        </div>
        <div class="top-item">
          <span class="top-text">加入我们</span>
        </div>
        <div class="top-item">
          <span class="top-text">帮助</span>
        </div>
      </div>
      <div class="form-wrappepr">
        <h1>登录到主页</h1>
        <input type="text" class="inputs user" placeholder="用户名/邮箱">
        <input type="password" class="inputs pwd" placeholder="密码">
        <span class="tips">忘记密码？</span>
        <button>注册</button>
        <div class="other-login">
          <div class="divider">
            <span class="line"></span>
            <span class="divider-text">联系我们</span>
            <span class="line"></span>
          </div>
          <div class="other-login-wrapper">
            <div class="other-login-item">
              <img src="@/assets/cssimages/login1/QQ.png" alt="QQ">
            </div>
            <div class="other-login-item">
              <img src="@/assets/cssimages/login1/WeChat.png" alt="WeChat">
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>
</template>

<script setup>

// document.querySelector(".people").addEventListener('animationend', function () {
//   this.classList.remove('p-animtion');
//   this.classList.add('p-other-animtion')
// });
// document.querySelector(".sphere").addEventListener('animationend', function () {
//   this.classList.remove('s-animtion');
//   this.classList.add('s-other-animtion')
// });

</script>

<style scoped lang="scss">
@import "index";
</style>